<template>
<div :class="[$style.container]">
<el-dialog title="添加同步" :visible.sync="visible" width="480px">
  <el-form size="small" label-position="left" :rules="rules1" :model="form1" @submit.native.prevent="" ref="fm1" v-if="step === 1">
    <el-form-item prop="docId" label="云端文件夹">
        <el-input placeholder="请选择云端文件夹" readonly="" v-model="form1.docPath" ref="cInput">
          <el-button slot="append" @click="onChooseDoc">浏览...</el-button>
        </el-input>
    </el-form-item>
    <el-form-item prop="localPath" label="本地文件夹">
        <el-input placeholder="请选择本地文件夹" readonly v-model="form1.localPath" ref="lInput">
          <el-button slot="append" @click="onChooseLocal">浏览...</el-button>
        </el-input>
    </el-form-item>
    <el-form-item prop="type" label="类型">
        <el-radio-group v-model="form1.type">
          <el-radio :label="row.value" :disabled="row.disabled" v-for="row in types" :key="row.value">{{row.label}}</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item prop="disabledListen" label="禁用监听" v-if="form1.type === 'up'">
      <el-switch v-model="form1.disabledListen"></el-switch>
    </el-form-item>
  </el-form>
  <el-form size="small" label-position="left" :rules="rules2" :model="form2" @submit.native.prevent="" ref="fm2" v-if="step === 2">
    <el-form-item prop="name" label="同步盘名称">
      <el-input placeholder="请填写同步盘名称" v-model="form2.name"></el-input>
    </el-form-item>
    <!-- <el-form-item prop="period" label="同步周期(s)">
      <el-input-number placeholder="请填写同步周期" v-model.number="form2.period" :min="10"></el-input-number>
    </el-form-item> -->
    <!-- <el-divider></el-divider> -->
    <el-form-item label="类型">
      <span class="text-secondary">{{rowTypeText}}</span>
    </el-form-item>
    <el-form-item label="云端文件夹">
      <span class="text-secondary">{{form1.docPath}}</span>
    </el-form-item>
    <el-form-item label="本地文件夹">
      <span class="text-secondary">{{form1.localPath}}</span>
    </el-form-item>
  </el-form>
  <span slot="footer">
    <template v-if="step === 1">
        <el-button size="small" @click="onCancel" class="px-5">取 消</el-button>
        <el-button size="small" type="primary" @click="onNext" :loading="submitting" class="px-5">下一步</el-button>
    </template>
     <template v-if="step === 2">
        <el-button size="small" @click="onCancel" class="px-5">取 消</el-button>
        <el-button size="small" type="primary" @click="onBack" :loading="submitting" class="px-5">上一步</el-button>
        <el-button size="small" type="primary" @click="onConfirm" :loading="submitting" class="px-5">完成</el-button>
    </template>
  </span>
</el-dialog>
<doc-choose-modal ref="docChooseModal"></doc-choose-modal>
</div>
</template>

<script lang="ts">

import { lock } from '@/api/doc'
import { ModalMixins } from '@/mixins'
import { mixins } from 'vue-class-component'
import { Vue, Component, Prop, Emit, Ref } from 'vue-property-decorator'
import DocChooseModal from '@/views/pages/components/doc-choose-modal/index.vue'
import { remote } from 'electron'

@Component({
  components: { DocChooseModal }
})
export default class CreateModal extends mixins(ModalMixins) {
  @Ref() fm1!: any

  @Ref() fm2!: any

  @Ref() docChooseModal!: DocChooseModal

  @Prop() beforeConfirmFn!: (data: any) => Promise<any>

  step = 1

  types = [
    { label: '单向上传', value: 'up' },
    { label: '单向下载', value: 'down' },
    { label: '双向同步', value: 'duplex', disabled: true }
  ]

  form1 = {
    localPath: '',
    docId: null,
    docPath: '',
    type: 'up',
    spaceId: null,
    docName: '',
    disabledListen: false
  }

  rules1 = {
    docId: [
      { required: true, message: '请选择云端文件夹', trigger: 'blur' }
    ],
    localPath: [
      { required: true, message: '请选择本地文件夹', trigger: 'blur' }
    ]
  }

  form2 = {
    name: '',
    period: 10
  }

  rules2 = {
    name: [
      { required: true, message: '请填写同步盘名称', trigger: 'change' }
    ]
    // ,
    // period: [
    //   { required: true, type: 'number', message: '请填写同步周期', trigger: 'change' }
    // ]
  }

  get rowTypeText () {
    return this.types.find(v => v.value === this.form1.type)?.label || ''
  }

  open () {
    this.form1 = {
      localPath: '',
      docId: null,
      docPath: '',
      type: 'up',
      spaceId: null,
      docName: '',
      disabledListen: false
    }
    this.step = 1
    this.$nextTick(() => {
      if (this.fm1) this.fm1.resetFields()
    })
    return this.init()
  }

  onCancel () {
    this.cancel()
  }

  onConfirm () {
    this.fm2.validate().then((valid: boolean) => {
      if (!valid) return
      this.submitting = true
      const data = {
        localPath: this.form1.localPath,
        docId: this.form1.docId,
        type: this.form1.type,
        name: this.form2.name,
        status: '',
        updateTime: null,
        period: this.form2.period,
        id: Date.now(),
        spaceId: this.form1.spaceId,
        message: '',
        total: 0,
        progress: 0,
        disabledListen: this.form1.disabledListen
      }
      if (this.beforeConfirmFn) {
        this.beforeConfirmFn(data).then(() => {
          this.visible = false
          if (this.resolve) this.resolve(data)
        }).finally(() => {
          this.submitting = false
        })
      } else {
        this.visible = false
        if (this.resolve) this.resolve(data)
      }
    })
  }

  onNext () {
    this.fm1.validate().then((valid: boolean) => {
      if (!valid) return
      this.form2.name = this.form1.docName || ''
      this.form2.period = 10
      this.step = 2
    })
  }

  onBack () {
    this.step = 1
  }

  onChooseDoc () {
    this.docChooseModal.open().then((data: any) => {
      const params = {
        docId: data?.id || null,
        docPath: data?.path || '',
        docName: data?.name || '',
        spaceId: data?.ownType === 'enterprise' ? data?.ownId : -1
      }
      Object.assign(this.form1, params)
      this.$nextTick(() => {
        const $e = this.$refs.cInput as HTMLInputElement
        if ($e) $e.focus()
      })
    }).catch(() => {
      // ignore
    })
  }

  onChooseLocal () {
    remote.dialog.showOpenDialog({
      properties: ['openDirectory']
    }).then(data => {
      if (!data?.canceled) {
        const target = data?.filePaths[0] || ''
        this.form1.localPath = target

        this.$nextTick(() => {
          const $e = this.$refs.lInput as HTMLInputElement
          if ($e) $e.focus()
        })
      }
    })
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {

}

</style>
